<template>
  <el-dialog title="基础信息"
             :visible="value"
             :close-on-click-modal="false"
             destroy-on-close
             width="800px"
             :before-close="handleClose">
    <el-form ref="ruleForm"
             :model="formData"
             :rules="rules"
             label-width="110px">
      <el-row>
        <el-col v-for="field in formFields"
                :key="field.prop"
                :span="12">
          <el-form-item :label="field.label"
                        :prop="field.prop">
            <template v-if="field.type === 'textarea'">
              <el-input v-model="formData[field.prop]"
                        :maxlength="field.maxlength"
                        :placeholder="field.placeholder"
                        :clearable="field.clearable"
                        type="textarea"></el-input>
            </template>
            <template v-else-if="field.type === 'area-cascader'">
              <area-cascader v-model="formData[field.prop]"
                             :props="field.props"></area-cascader>
            </template>
            <template v-else>
              <el-input v-model="formData[field.prop]"
                        :maxlength="field.maxlength"
                        :placeholder="field.placeholder"
                        :clearable="field.clearable"></el-input>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="handleSubmit('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { account } from "@service"
import AreaCascader from "@basic/area/AreaCascader.vue";
import _ from "lodash"

const formFields = [
  { label: "公司网站", prop: "url", maxlength: 50, placeholder: "请输入公司网站", clearable: true },
  { label: "公司简称", prop: "abbr", maxlength: 50, placeholder: "请输入公司简称", clearable: true },
  { label: "所属行业", prop: "industry", maxlength: 50, placeholder: "请输入所属行业", clearable: true },
  { label: "公司所在城市", prop: "address", type: "area-cascader", props: { label: 'name', value: 'areaCode', checkStrictly: false } },
  { label: "联系电话", prop: "contactMobile", maxlength: 50, placeholder: "请输入联系电话", clearable: true },
  { label: "联系人", prop: "contactName", maxlength: 20, placeholder: "请输入联系人", clearable: true },
  { label: "开户银行", prop: "bankName", maxlength: 30, placeholder: "请输入开户银行", clearable: true },
  { label: "银行账号", prop: "bankAccount", maxlength: 20, placeholder: "请输入银行账户", clearable: true },
  { label: "开户地址", prop: "bankAddress", type: "textarea", maxlength: 100, placeholder: "请输入开户地址", clearable: true },
  { label: "公司地址", prop: "companyAddress", type: "textarea", maxlength: 100, placeholder: "请输入公司地址", clearable: true },
  { label: "传真", prop: "fax", maxlength: 30, placeholder: "请输入传真", clearable: true }
]

export default {
  name: 'UserBasicInfoForm',
  components: { AreaCascader },
  props: {
    value: {
      required: true,
      type: Boolean,
    },
    form: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      formData: {},
      formFields,
      loading: false,
      rules: {
        address: [{ required: true, message: '请选择所在城市', trigger: 'change' }]
      },
      // props: {
      //   label: 'name',
      //   value: 'areaCode',
      //   checkStrictly: false
      // },
    }
  },
  computed: {
  },
  watch: {
    value () {
      if (this.value) {
        const form = _.cloneDeep(this.form)
        this.formData = {
          ...form,
          companyAddress: form?.address?.address
        }
      }
    }
  },
  created () {
  },
  methods: {
    handleClose () {
      this.$emit("input", false)
    },
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.editAdminUserInfo()
        } else {
          return false;
        }
      });
    },
    async editAdminUserInfo () {
      try {
        const { address, companyAddress, ...rest } = this.formData
        const params = {
          ...rest,
          address: {
            ...address,
            address: companyAddress
          }
        }
        const response = await account.editAdminUserInfo(params)
        if (response.code === 0) {
          this.$message({ type: "success", message: response.message });
          this.loading = false
          this.$emit("input", false)
          this.$emit('refresh')
        };
      } catch (error) {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>